<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建资产 | 资产公证平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#4080FF',
            neutral: '#F5F7FA',
            dark: '#1D2129',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .btn-hover {
        transition: all 0.3s ease;
      }
      .btn-hover:hover {
        transform: translateY(-2px);
      }
    }
  </style>
</head>
<body class="font-inter bg-neutral text-dark min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm">
    <div class="container">
      <a class="navbar-brand text-primary font-bold text-xl" href="index.html">
        <i class="fa-solid fa-shield-check mr-2"></i>资产公证平台
      </a>

      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link " href="index.html">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="create.html">创建资产</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="query.html">查询资产</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="transfer.html">转移资产</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="flex-grow">
    <!-- 页面标题区 -->
    <section class="bg-primary text-white py-12">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h1 class="text-3xl font-bold mb-2">创建资产</h1>
            <p class="text-white/80">填写以下信息，将您的资产上链公证</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 资产创建表单 -->
    <section class="py-16 bg-neutral">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8">
            <div class="bg-white rounded-xl p-8 card-shadow">
              <div class="mb-8">
                <h2 class="text-2xl font-bold mb-4">资产信息</h2>
                <p class="text-gray-600">请填写以下资产详细信息，完成后系统将自动进行上链公证</p>
              </div>
              
              <form id="assetCreationForm">
                <div class="mb-6">
                  <label for="assetId" class="form-label font-medium">资产ID</label>
                  <input type="text" class="form-control rounded-lg border-gray-300" id="assetId" placeholder="系统将自动生成" readonly>
                  <button type="button" id="generateIdBtn" class="btn btn-outline-primary mt-2 btn-hover">
                    <i class="fa-solid fa-random mr-2"></i>生成ID
                  </button>
                </div>
                
                <div class="mb-6">
                  <label for="owner" class="form-label font-medium">资产所有者</label>
                  <input type="text" class="form-control rounded-lg border-gray-300" id="owner" placeholder="请输入资产所有者名称" required>
                </div>
                
                <div class="mb-6">
                  <label for="assetName" class="form-label font-medium">资产名称</label>
                  <input type="text" class="form-control rounded-lg border-gray-300" id="assetName" placeholder="请输入资产名称" required>
                </div>
                
                <div class="mb-6">
                  <label for="assetType" class="form-label font-medium">资产类型</label>
                  <select class="form-control rounded-lg border-gray-300" id="assetType" required>
                    <option value="">请选择资产类型</option>
                    <option value="realEstate">房地产</option>
                    <option value="vehicle">车辆</option>
                    <option value="art">艺术品</option>
                    <option value="intellectualProperty">知识产权</option>
                    <option value="other">其他</option>
                  </select>
                </div>
                
                <div class="mb-6">
                  <label for="description" class="form-label font-medium">资产描述</label>
                  <textarea class="form-control rounded-lg border-gray-300" id="description" rows="4" placeholder="请详细描述您的资产" required></textarea>
                </div>
                
                <div class="mb-6">
                  <label class="form-label font-medium">资产图片 (可选)</label>
                  <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-colors cursor-pointer" id="imageUploadArea">
                    <i class="fa-solid fa-cloud-upload text-4xl text-gray-400 mb-3"></i>
                    <p class="text-gray-500 mb-2">点击或拖拽文件到此处上传</p>
                    <p class="text-gray-400 text-sm">支持 JPG, PNG 格式，最大 5MB</p>
                    <input type="file" id="imageUpload" accept="image/*" class="hidden">
                  </div>
                  <div id="previewContainer" class="mt-4 hidden">
                    <img id="imagePreview" src="" alt="预览图" class="max-w-full h-auto rounded-lg">
                    <button type="button" id="removeImageBtn" class="mt-2 text-red-500 hover:text-red-700 transition-colors">
                      <i class="fa-solid fa-trash mr-1"></i>移除图片
                    </button>
                  </div>
                </div>
                
                <div class="mb-8">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="termsAgreement" required>
                    <label class="form-check-label text-gray-600" for="termsAgreement">
                      我确认所提供的信息真实准确，并同意<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#" class="text-primary hover:underline">隐私政策</a>
                    </label>
                  </div>
                </div>
                
                <div class="d-flex justify-content-center">
                  <button type="submit" class="btn btn-primary px-8 py-3 rounded-lg font-medium btn-hover w-full max-w-xs">
                    <i class="fa-solid fa-link mr-2"></i>资产上链
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 上链成功模态框 -->
    <div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-xl">
          <div class="modal-header border-0">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body text-center p-8">
            <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <i class="fa-solid fa-check text-green-500 text-3xl"></i>
            </div>
            <h3 class="text-2xl font-bold mb-2">资产上链成功</h3>
            <p class="text-gray-600 mb-6">您的资产已成功公证并上链</p>
            <div class="bg-neutral rounded-lg p-4 mb-6 text-left">
              <p class="font-medium mb-2">资产ID: <span id="modalAssetId" class="text-primary"></span></p>
              <p class="font-medium mb-2">创建时间: <span id="modalCreationTime"></span></p>
              <p class="font-medium">交易哈希: <span id="modalTransactionHash" class="text-primary"></span></p>
            </div>
            <button type="button" class="btn btn-primary px-6 py-3 rounded-lg font-medium btn-hover" data-bs-dismiss="modal">
              完成
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-10">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 mb-8">
          <h3 class="text-xl font-bold mb-4">资产公证平台</h3>
          <p class="text-gray-400 mb-6">利用区块链技术，为您的资产提供安全、透明的公证服务</p>
          <div class="d-flex gap-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-facebook"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-twitter"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-linkedin"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-instagram"></i>
            </a>
          </div>
        </div>
        
        <div class="col-lg-2 col-md-6 mb-8">
          <h4 class="text-lg font-semibold mb-4">快速链接</h4>
          <ul class="list-unstyled text-gray-400">
            <li class="mb-2"><a href="index.html" class="hover:text-white transition-colors">首页</a></li>
            <li class="mb-2"><a href="create.html" class="hover:text-white transition-colors">创建资产</a></li>
            <li class="mb-2"><a href="query.html" class="hover:text-white transition-colors">查询资产</a></li>
            <li class="mb-2"><a href="transfer.html" class="hover:text-white transition-colors">转移资产</a></li>
          </ul>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-8">
          <h4 class="text-lg font-semibold mb-4">联系我们</h4>
          <ul class="list-unstyled text-gray-400">
            <li class="mb-2"><i class="fa-solid fa-map-marker-alt mr-2"></i>北京市海淀区中关村大街</li>
            <li class="mb-2"><i class="fa-solid fa-phone mr-2"></i>400-123-4567</li>
            <li class="mb-2"><i class="fa-solid fa-envelope mr-2"></i>contact@assetnotary.com</li>
          </ul>
        </div>
        
        <div class="col-lg-3 mb-8">
          <h4 class="text-lg font-semibold mb-4">订阅更新</h4>
          <p class="text-gray-400 mb-4">订阅我们的通讯，获取最新的资产公证资讯</p>
          <form class="d-flex">
            <input type="email" class="form-control rounded-l-lg border-gray-700 bg-gray-800 text-white" placeholder="您的邮箱">
            <button type="submit" class="btn btn-primary rounded-r-lg">
              <i class="fa-solid fa-arrow-right"></i>
            </button>
          </form>
        </div>
      </div>
      
      <div class="border-t border-gray-800 pt-8 mt-8 text-center text-gray-500">
        <p>&copy; 2025 资产公证平台. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 生成随机ID
      const generateIdBtn = document.getElementById('generateIdBtn');
      const assetIdInput = document.getElementById('assetId');
      
      generateIdBtn.addEventListener('click', function() {
        const randomId = 'ASSET-' + Math.random().toString(36).substr(2, 10).toUpperCase();
        assetIdInput.value = randomId;
      });
      
      // 图片上传功能
      const imageUploadArea = document.getElementById('imageUploadArea');
      const imageUpload = document.getElementById('imageUpload');
      const previewContainer = document.getElementById('previewContainer');
      const imagePreview = document.getElementById('imagePreview');
      const removeImageBtn = document.getElementById('removeImageBtn');
      
      imageUploadArea.addEventListener('click', function() {
        imageUpload.click();
      });
      
      imageUpload.addEventListener('change', function(e) {
        if (e.target.files && e.target.files[0]) {
          const reader = new FileReader();
          
          reader.onload = function(e) {
            imagePreview.src = e.target.result;
            previewContainer.classList.remove('hidden');
          }
          
          reader.readAsDataURL(e.target.files[0]);
        }
      });
      
      removeImageBtn.addEventListener('click', function() {
        imageUpload.value = '';
        previewContainer.classList.add('hidden');
      });
      
      // 表单提交
      const assetCreationForm = document.getElementById('assetCreationForm');
      const successModal = new bootstrap.Modal(document.getElementById('successModal'));
      
      assetCreationForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 模拟上链过程
        const submitBtn = e.submitter;
        const originalText = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i>处理中...';
        
        // 模拟API调用
        setTimeout(function() {
          // 更新模态框内容
          document.getElementById('modalAssetId').textContent = assetIdInput.value;
          document.getElementById('modalCreationTime').textContent = new Date().toLocaleString();
          document.getElementById('modalTransactionHash').textContent = '0x' + Math.random().toString(36).substr(2, 40);
          
          // 显示成功模态框
          successModal.show();
          
          // 重置表单
          assetCreationForm.reset();
          previewContainer.classList.add('hidden');
          
          // 恢复按钮状态
          submitBtn.disabled = false;
          submitBtn.innerHTML = originalText;
        }, 2000);
      });
      
      // 模态框关闭后滚动到顶部
      successModal._element.addEventListener('hidden.bs.modal', function() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>
</html>
    